<template>
  <div class="file-container">
    <fileupload :multiple="false" :preview="true" :url="'/file/upload'" v-model="fileList"></fileupload>
    <hr />
    <div class="ws">
      <div class="ws-hd">
        <span>websocket地址:</span>
        <input type="text" v-model="ws.url" placeholder="请输入ws地址" />
        <button type="primary" v-if="ws.type===0" @click="init">连接</button>
        <button type="primary" v-if="ws.type===1" @click="wsClose">断开</button>
      </div>
      <div class="ws-bd">
        <textarea v-model="ws.msg" cols="30" rows="10" placeholder="请输入发送内容"></textarea>
        <el-button type="primary" size="small" @click="send">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import fileupload from "@/components/upload/index.vue";
import websocket from "@/utils/websocket.js";
export default {
  components: { fileupload },
  data() {
    return {
      fileList: [],
      ws: {
        url: "",
        msg: "",
        type: 0
      },
      w: null
    };
  },
  created() {},
  methods: {
    init() {
      if (this.ws.url) {
        this.ws.type = 1;
        websocket.init(this.ws.url, recive);
      } else {
        this.$message({
          type: "error",
          message: "WS连接地址不能为空"
        });
      }
    },
    // 接收到后端数据的回调
    recive(data) {},
    // 发送消息
    send() {
      websocket.send(this.ws.msg);
    },
    wsClose() {
      this.ws.type = 0;
      // 断开websocket
      websocket.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.ws {
  background: #fff;
  height: 300px;
  &-hd {
    margin: 0 auto;
    width: 80%;
    span,
    input {
      margin-right: 10px;
    }
    input {
      outline: none;
    }
  }

  &-bd {
    margin-top: 10px;
    textarea {
      width: 100%;
      outline: none;
    }
  }
}
</style>

<style lang="scss">
.file {
  &-container {
    margin: 30px;
  }
}
</style>